<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="refresh">点击刷新新闻</button>
    <div id="newsList"></div>
    <script>
        // 获取元素
        const refresh = document.querySelector('#refresh')
        const newsList = document.querySelector('#newsList')
        // 点击事件
        refresh.onclick = () => {
            // 1. new
            const xhr = new XMLHttpRequest()
            // 2. open
            xhr.open('GET', 'http://ajax-api.itheima.net/api/news')
            // 3. send
            xhr.send()
            // 4. 监听
            // xhr.responseType = 'json'
            xhr.responseType = 'text'
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // console.log(xhr.response)
                    // console.log(JSON.parse(xhr.response))
                    // const { data } = xhr.response
                    const { data } = JSON.parse(xhr.response)
                    // console.log(data)
                    newsList.innerHTML = data.map(el => `
                        <div>
                            <img src="${el.img}">
                            <h4>${el.title}</h4>
                            <p>发布时间：${el.time} - 评论数：${el.cmtcount} - 来源：${el.source}</p>
                        </div>
                    `).join('')
                }
            }
        }
    </script>
    <div>
        <img src="">
        <h4></h4>
        <p></p>
    </div>
</body>

</html>